<template>
	<s-layout navbar="custom1"  :bgStyle="{
	  color: '#f6f6f6'
	}" onShareAppMessage>
		<assNavbar title="犇犇直播" color="#333" :background="{ BGcolor: '#fff', img: 'none' }"></assNavbar>
		<template v-if="state.list && state.list.length>0">
			<view class="list">
				<view class="item" v-for="(item,index) in state.list" :key="index">
					<view class="live" :style="'background-image: url('+item.src+'); background-size: cover; background-repeat: no-repeat;'">
						<view class="look">
							<image src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408011335227882.png" mode="aspectFill" class="ing"></image>
							<view class="people">{{item.views}}人观看</view>
						</view>
					</view>
					<view class="msg">
						<image :src="item.avatar" mode="aspectFill" class="avatar"></image>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</template>
			
	</s-layout>
</template>

<script setup>
	//首页优惠券列表组件
	import {
			reactive,			
			ref
		} from 'vue';
	import assNavbar from '@/components/ass-navbar.vue'	
	import sheep from '@/sheep';
	
	const state = reactive({
		list:[
			{id:1,src:"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408011152085413.png",views:798,avatar:"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408011329445421.png",name:"萌宠洗护"},
			{id:2,src:"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408011152082626.png",views:798,avatar:"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408011329445421.png",name:"安欣洗护"},
			{id:3,src:"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408011152082626.png",views:798,avatar:"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408011329445421.png",name:"安欣洗护"},
			{id:4,src:"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408011152083440.png",views:798,avatar:"https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/creator/202408011329445421.png",name:"安欣洗护"}
		]
	})
	
</script>

<style lang="scss" scoped>
.list{
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	flex-wrap:wrap;
	background-color:#F6F6F6;
	.item{
		margin-top:10rpx;
		border-radius:16rpx;
		background-color:#FFFFFF;
		margin-left:16rpx;
		margin-right:16rpx;
		width:calc((100% - 64rpx) / 2);
		margin-top:16rpx;
		border-radius:10rpx;
		height:474rpx;
		font-family: Source Han Sans;
		.live{
			width:100%;
			height:404rpx;
			display:flex;
			flex-direction:column;
			position:relative;
			.look{
				display:flex;
				flex-direction:row;
				justify-content:flex-start;
				align-items: center;
				background: rgba(0, 0, 0, 0.37);
				width:200rpx;
				border-radius:25rpx;
				margin-top:20rpx;
				.ing{
					width:50rpx;
					height:50rpx;
				}
				.people{
					width:150rpx;
					font-family: Source Han Sans;
					font-size: 24rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0rpx;
					color: #FFFFFF;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
			
		}
		.msg{
			height:70rpx;
			width:100%;
			background: rgba(216, 216, 216, 0.16);
			display:flex;
			justify-content:flex-start;
			align-items:center;
			.avatar{
				height:50rpx;
				width:50rpx;
				
			}
			.name{
				font-size: 24rpx;
				font-weight: bold;
				line-height: normal;
				letter-spacing: 1rpx;
				color: #14C89F;
				margin-left:20rpx;
			}
			
		}
	}
}
</style>
